import { useEffect, useState } from "react";
import { history } from "umi";
import { PlusOutlined } from "@ant-design/icons";
import "./index.less";
import { PaddingContent } from "@/components/page-padding";
import { CustomTitle } from "@/components/customTitle";
import { Card, Descriptions, Button, message } from "antd";
import { StyleViewDocument } from "@/components/common-styled";
import styled from "styled-components";
import edit from "@/assets/image/icons/edit.svg";
import {
  StyledAlertCircle,
  StyleApprovedStatusSpan,
  StyleDeclineStatusSpan,
  StyleExpiredStatusSpan,
} from "@/components/common-styled";
import { getLPNList } from "@/services/lpn-registration";
import { getIconSrc } from "./utils";
import { DataType } from "./types";
import LPNuseStore from "@/store/lpnStore";

export const DownloadTemplate = styled(StyleViewDocument)`
  font-size: 16px;
  margin-left: 16px;
  &:hover {
    cursor: pointer;
  }
`;

export const StyleStatusSpan = styled("span")`
  padding: 4px 8px 4px 8px;
  border-radius: 20px;
  background-color: #e4f6ea;
  color: #26a461;
  font-family: Roboto;
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  text-align: left;
  margin-left: 12px;
`;

const vehicleTypesOrder = ["PRIVATE_CAR", "MOTOR_CYCLE", "LGV"];

const RegisteredLpnList = () => {
  // const [vehicleTypeIconMap, setVehicleTypeIconMap] = useState(new Map());
  const { setData } = LPNuseStore();
  const [vehicleMap, setVehicleMap] = useState(new Map());

  const handleOnClickBtn = (item: DataType, type: string) => {
    console.log("Form values:", item?.vehType);
    // add 点击得类型
    const updatedItem = {
      ...item, // 展开原始对象的所有属性
      type: type, // 添加新的 type 属性
    };
    setData(updatedItem);
    // return;
    //console.log("Form values:", data[index]?.vehType);
    history.push({
      pathname: "/myRegistered-lpn/edit",
    });

    // 处理提交逻辑
  };
  // 在 useEffect 钩子中进行初始的设置
  // useEffect(() => {
  //   setVehicleTypeIconMap(
  //     new Map([
  //       ["Private Car", privatecar],
  //       ["Motorcycle", Motorcycle],
  //       ["Light Goods Vehicle", LGV],
  //     ])
  //   );
  // }, []);

  useEffect(() => {
    getLPNList({
      userId: "a341a8d8-07fa-4971-b797-efda0b88f8c0",
    })
      .then((data) => {
        //@ts-ignore
        console.log(data, "data");
        //@ts-ignore
        // setLPNList(data.data);
        //@ts-ignore
        const map = new Map(data.data.map((item) => [item.vehType, item]));
        setVehicleMap(map);
      })
      .catch((error) => {
        message.error(error?.message);
      });
  }, []);
  return (
    <PaddingContent>
      <div className="registeredLpnList">
        <CustomTitle>My Registered License Plate Number</CustomTitle>
        <div className="registeredLpnList-content">
          <div className="top-text">Your Registered License Plate Number</div>

          {/* {LPNList?.map((item, index) => (
           
          ))} */}

          {vehicleTypesOrder.map((type, index) => {
            console.log(type, "type");
            const item = vehicleMap.get(type);
            console.log(item, "items");

            return item ? (
              <Card key={index}>
                <div className="vehicle-type-icon">
                  <img src={getIconSrc(type)} alt="SVG icon" />
                </div>
                <Descriptions column={7} layout="vertical">
                  <Descriptions.Item key="vehicleType" label="Vehicle Type">
                    {item.vehType}
                  </Descriptions.Item>
                  <Descriptions.Item label="License Plate Number">
                    {item.lpnNo}
                    {item.approvalStatus === "PENDING" && (
                      <StyleApprovedStatusSpan>
                        {item.approvalStatus}
                      </StyleApprovedStatusSpan>
                    )}
                    {item.approvalStatus === "Approved" && (
                      <StyleApprovedStatusSpan>
                        {item.approvalStatus}
                      </StyleApprovedStatusSpan>
                    )}
                    {item.approvalStatus === "Decline" && (
                      <StyleDeclineStatusSpan>
                        {item.approvalStatus}
                        <StyledAlertCircle />
                      </StyleDeclineStatusSpan>
                    )}
                    {item.approvalStatus === "Expired" && (
                      <StyleExpiredStatusSpan>
                        {item.approvalStatus}
                      </StyleExpiredStatusSpan>
                    )}
                  </Descriptions.Item>
                  <Descriptions.Item label="Octopus No.">
                    {item.octopusNo}
                  </Descriptions.Item>
                  <Descriptions.Item label="DPP Permit">
                    {item.dppp}
                  </Descriptions.Item>
                  <Descriptions.Item label="Authorization Letter">
                    {item.authLetter}
                  </Descriptions.Item>
                </Descriptions>

                <Button onClick={() => handleOnClickBtn(item, type)}>
                  <img src={edit} alt="edit" />
                  Edit
                </Button>
              </Card>
            ) : (
              <Card key={index}>
                <div className="vehicle-type">
                  <img src={getIconSrc(type)} alt="SVG icon" />
                  <span>{type}</span>
                </div>
                <Button
                  icon={<PlusOutlined />}
                  onClick={() => handleOnClickBtn(item, type)}
                >
                  Register
                </Button>
              </Card>
            );
          })}
        </div>
      </div>
    </PaddingContent>
  );
};

export default RegisteredLpnList;
